paint()

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La fonction CSS paint() définit une valeur de type image générée avec un PaintWorklet.

Syntaxe

css
paint(nomWorklet, parametres)

Paramètres

nomWorklet

Le nom du worklet enregistré.

paramètres

Des paramètres supplémentaires, optionnels, à passer à paintWorklet.

Exemples

Utilisation simple

Il est possible de passer des arguments supplémentaires grâce à la fonction CSS paint(). Dans cet exemple, on passe deux arguments : le premier indiquant si l'image passée en arrière-plan est pleine ou constitue uniquement un contour, le second indiquant la largeur du contour ainsi formé.

css
li {
  --boxColor: hsla(55, 90%, 60%, 1);
  background-image: paint(hollowHighlights, stroke, 2px);
}

li:nth-of-type(3n) {
  --boxColor: hsla(155, 90%, 60%, 1);
  background-image: paint(hollowHighlights, filled, 3px);
}

li:nth-of-type(3n + 1) {
  --boxColor: hsla(255, 90%, 60%, 1);
  background-image: paint(hollowHighlights, stroke, 1px);
}

On a ajouté une propriété personnalisée dans le sélecteur pour définir boxColor. Cette propriété personnalisée est accessible depuis l'objet PaintWorklet.

Spécifications

Specification
CSS Painting API Level 1
# paint-notation

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi